
<script setup>
import { ref, onMounted } from 'vue';
import { videoStore } from '@/store/video'
// const checkCarema = async () => {
//    if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {

//       // 获取所有音视频输入设备
//       navigator.mediaDevices.enumerateDevices()
//          .then(function (devices) {
//             debugger
//             devices.forEach(function (device) {
//                if (device.kind === 'videoinput') {
//                   console.log('摄像头设备名称：' + device.label);
//                }
//             });
//          })
//          .catch(function (err) {
//             console.error('获取设备信息时出现错误：', err);
//          });
//    } else {
//       console.error('浏览器不支持获取设备信息的API');
//    }
//    try {
//       if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//          //调用用户媒体设备, 访问摄像头
//          getUserMediaMethod({ video: { width: 720, height: 576 } }, successCallBackMethod, errorCallBackMethod);
//       } else {
//          alert('不支持访问用户媒体');
//       }
//       var stream = await navigator.mediaDevices.getUserMedia({ video: true });
//    } catch (error) {
//       alert('相机设备不存在')
//       return;
//    }
// }
// const getUserMediaMethod = (constraints, success, error) => {
//    if (navigator.mediaDevices.getUserMedia) {
//       //最新的标准API
//       navigator.mediaDevices.getUserMedia(constraints).then(successCallBackMethod).catch(errorCallBackMethod);
//    } else if (navigator.webkitGetUserMedia) {
//       //webkitgetUserMedia核心浏览器
//       navigator.webkitGetUserMedia(constraints, success, error)
//    } else if (navigator.mozGetUserMedia) {
//       //firfox浏览器
//       navigator.mozGetUserMedia(constraints, success, error);
//    } else if (navigator.getUserMedia) {
//       //旧版API
//       navigator.getUserMedia(constraints, success, error);
//    }
// }
// const successCallBackMethod = (stream) => {
//    console.log("success");
// }
// const errorCallBackMethod = (error) => {
//    console.error(`访问用户媒体设备失败${error.name}, ${error.message}`);
// }
// const checkAudio = async () => {
//    try {
//       var stream = await navigator.mediaDevices.getUserMedia({ audio: true });
//       // 创建音频上下文
//       var audioContext = new AudioContext();
//       var analyser = audioContext.createAnalyser();

//       // 获取音频流源
//       var source = audioContext.createMediaStreamSource(stream);
//       source.connect(analyser);

//       // 设置音频分析器
//       analyser.fftSize = 256;
//       var bufferLength = analyser.frequencyBinCount;
//       var dataArray = new Uint8Array(bufferLength);

//       // 获取声音大小并更新进度条
//       function updateProgress() {
//          analyser.getByteFrequencyData(dataArray);
//          var total = 0;
//          for (var i = 0; i < bufferLength; i++) {
//             total += dataArray[i];
//          }
//          var average = total / bufferLength;
//          var progressBar = document.getElementById('progressBar');
//          progressBar.style.width = average + 'px';

//          requestAnimationFrame(updateProgress);
//       }

//       // 开始更新进度条
//       updateProgress();
//    } catch (error) {
//       alert('相机设备和音频设备不存在')
//       return;
//    }
// }
var sdk = null;
var videos = ref();
var name = ref();
var patient = ref();
var tableData = ref( [{
          name: '王小虎',
          Count: 200333
        }, {
          name: '王小虎',
          Count: 200333
        }, {
          name: '王小虎',
          Count: 200333
        }, {
          name: '王小虎',
          Count: 200333
        }]);
const push = async () => {
   var target = event.target;
   if (target.textContent == "视频通话") {
      target.textContent = "关闭";
      if (sdk) {
         sdk.close();
      }
      var audio = videoStore().getAudio();
      var video = videoStore().getVideo();
      sdk = new SrsRtcWhipWhepAsync(video, audio);
      var room = name.value;
      var Finalurl = urlData.pushUrl + 'app=' + room + '&stream=' + patient.value;
      videos.value.srcObject = sdk.stream;
      sdk.publish(Finalurl).then(function (session) {
         console.log(session);

      }).catch(function (reason) {
         // Throw by sdk.

         sdk.close();
         console.error(reason);
      });

   }
   else {
      target.textContent = "视频通话";
      calcel();
   }
}
const calcel = () => {
   if (sdk) {
      sdk.close();
   }
}
let urlData = null;
window.addEventListener('unload', function (event) {
   // 在页面即将被卸载时执行的操作
   // 你可以在这里执行你想要的事件，比如发送请求、保存数据等

   // 这里可以添加你的自定义逻辑
   calcel();
   console.log(111);
});
onMounted(async () => {
   console.log(111222);
   var res = await fetch('/configjs.json?d=' + new Date());
   urlData = await res.json();
})
</script>
<template>
   <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      fixed
      prop="name"
      label="群组名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="Count"
      label="群组人数"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="90">
      
      <el-button @click="handleClick(scope.row)" type="text" size="small">加入</el-button>
    </el-table-column>
  </el-table>
   <!-- <el-row style="height: 3vh;"> -->

   <!-- <el-button type="primary" @click="checkCarema" plain>检测相机</el-button>
      <el-button type="primary" @click="checkAudio" plain>检测麦克风</el-button> -->
   <!-- <el-button type="primary" id="push" @click="push" plain>视频通话</el-button> -->
   <!-- <div id="progressBar" style="width: 0; height: 20px; background-color: #4caf50;align-items: center;"></div> -->
   <!-- <div style="width: 100%; background-color: #f1f1f1;">
      </div> -->
   <!-- </el-row>
   <el-row style="height: 3vh;">
      <div>

         <el-text class="mx-1">诊疗机构</el-text>
         <el-input v-model="name" style="width: 240px;margin-left: 10px;" placeholder="Please input" />
      </div>
      <div>

         <el-text style="margin-left: 10px;" class="mx-1">患者名称</el-text>
         <el-input v-model="patient" style="width: 240px;margin-left: 10px;" placeholder="Please input" />
      </div>
   </el-row>
   <el-row style="height: 94vh; ">
      <video ref="videos" style="width: 100%;height: 94vh;" autoplay muted></video>
   </el-row> -->
</template>